<template>
    <h1>计算属性:Computed</h1>
    <div class="container">
        姓: <input type="text" v-model="firstname" placeholder="请输入姓氏"> 
        <br>
        名: <input type="text" v-model="lastname" placeholder="请输入名字">
        <br>
        姓名: {{fullName}}
        <br>
        <button @click="changeFullName">改名</button>
    </div>
</template>

<script setup lang="ts">
import { ref , computed } from 'vue';
let firstname = ref('张');
let lastname = ref('三');

// 这样定义的计算属性,是只读的,具体看改变名字方法.官方建议这样写
// let fullName = computed(val => firstname.value + '-' + lastname.value)
// 用函数一样能达到同样的效果,但是函数没有缓存机制
// function fullName(){
//     console.log(1)
//     return firstname.value + '-' + lastname.value;
// }
// 第二种方法 官方不建议这样写
let fullName = computed({
  get(){
    return firstname.value + '-' + lastname.value;
  },
  set(val){
    let [str1,str2] = val.split('-');
    firstname.value = str1;
    lastname.value = str2;
  }  
})
function changeFullName(){
    // 此处如果是通过第一种方式声明的计算属性,则不能修改因为是只读属性;
    fullName.value = '李-四'
}
</script>

<style  scoped>
    .container{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>